<!DOCTYPE html>
<html lang="en">

<head>
  <title>我的地址</title>
  <link rel="stylesheet" href="/css/total/address.css">
  <% include ../component/common_meta.html %>
  <% include ../component/_common_tongji.html %>
</head>

<body>
  <div id="app">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div class="content" v-cloak>
      <%if(address_origin == 'order') {%>
        <div class="address" v-for="item in addressList">
          <p>{{item.name}}&nbsp;&nbsp;{{item.phone}}
            <i @click="handleEditAddress(item.id)" class="edit">修改</i>
            <i @click="handleDelectAddress(item.id)" class="delete">删除</i>
            <span v-if="item.is_default == 1">默认</span>
          </p>
          <span class="address_span">{{item.code_address}} {{item.user_address}}</span>
        </div>
        <p class="address-margin"></p>
        <button @click="handleAddAddress" class="btn">新建收货地址</button> 
        <%} else if (address_origin == 'signup'){%>
          <div class="address" v-for="item in addressList" @click="handleChooseAddress(item)">
            <p>{{item.name}}&nbsp;&nbsp;{{item.phone}}
              <i @click="handleEditAddress(item.id)" class="edit">修改</i>
              <i @click="handleDelectAddress(item.id)" class="delete">删除</i>
              <span v-if="item.is_default == 1">默认</span>
            </p>
            <span class="address_span">{{item.code_address}} {{item.user_address}}</span>
          </div>
          <p class="address-margin"></p>
          <button @click="handleAddAddress" class="btn">新建收货地址</button> 
        <%} else {%>
          <div class="name">
            <label for="name">收货人：</label>
            <input type="text" id="name" v-model="addAddress.name">
          </div>
          <div class="lxWay">
            <label for="lxWay">联系方式：</label>
            <input type="text" id="lxWay" v-model="addAddress.phone">
          </div>
          <div class="area" @click="handleChooseArea">
            <p>所在地区：{{addAddress.code_address}}
              <img src="/img/right.png" alt="">
            </p>
            <span></span>
          </div>
          <div class="mode" v-if="areaMode" @click.self="handleModeFalse">
            <div class="chooseArea">
              <h3>选择地区
                <button @click="handleModeFalse">取消</button>
              </h3>
              <div class="line"></div>
              <div style="height: 100%;overflow: auto;">
                <ul v-if="is_province">
                  <li v-for="item in XZPList" @click="handleChooseXZCity(item.code,item.name)">{{item.name}}
                    <img src="/img/right.png" alt="">
                  </li>
                </ul>
                <ul v-if="is_city">
                  <li v-for="item in XZPList" @click="handleChooseXZArea(item.code,item.province_code,item.name)">{{item.name}}
                    <img src="/img/right.png" alt="">
                  </li>
                </ul>
                <ul v-if="is_area">
                  <li v-for="item in XZPList" @click="handleGetAreaName(item.name)">{{item.name}}
                    <img src="/img/right.png" alt="">
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="xAddreaa">
            <label for="xAddreaa">详细地址：</label>
            <input type="text" id="xAddreaa" placeholder="街道、楼牌号等" v-model="addAddress.user_address">
          </div>
          <div class="default">
            <p>设为默认地址</p>
            <span v-if="!addAddress.is_default" @click="handleDefault">
              <img src="/img/down.png" alt="">
            </span>
            <span v-if="addAddress.is_default" @click="handleDefault">
              <img src="/img/up.png" alt="">
            </span>
          </div>
          <div class="keep" @click="handleKeepAddress">
            保存并使用
          </div>
        <%}%>
    </div>
  </div>
  <% include ../component/common_js.html %>
  <!-- Initialize Swiper -->
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        invitation_code: '',
        addAddress: {
          name: '',
          phone: '',
          token: '',
          receiving_info_id: '<%=receiving_info_id%>',
          province_code: '', //省份代码
          city_code: '',  //市代码
          code_address: '',   //通过代码地址拼接出来的地址
          user_address: '',   //用户添加的详细地址
          address: '',
          is_default: false,
        },
        addressList: [],
        XZPList: [], //省份
        address_origin: '',  // 地址来源   =signup 支付页进的   =edit  编辑  =order 订单页进的
        areaMode: false,
        is_province: true, // 是否显示省列表
        is_city: false,  // 是否显示市列表
        is_area: false, // 是否显示区列表
        is_add: false, // 新建地址，
        choose_Area: false
      },
      mounted: function () {
        if (localStorage.getItem('token') && localStorage.getItem('token') != '') {
          this.addAddress.token = localStorage.getItem('token');
          <% if (receiving_info_id == '') { %>
            this.getAddressList()
          <%}%>
        } else {
          location.href = '/tlmall/login?' + window.location.href;
          return;
        }
        <% if (address_origin) { %>
          this.address_origin = '<%= address_origin %>'
        <%}%>

        //  TODO 
        <% if (receiving_info_id != '') { %>
          var vm = this;
          api.post('/api/v2/receiving_info/getReceivingInfoList', {
            token: localStorage.getItem('token')
          }).then(res => {
            if (res.data.res_code == 1) {
              res.data.data.forEach(function (item) {
                if (item.id == "<%=receiving_info_id%>") {
                  vm.addAddress.name = item.name;
                  vm.addAddress.phone = item.phone;
                  vm.addAddress.user_address = item.user_address;
                  vm.addAddress.code_address = item.code_address;
                }
              })
            } else if (res.data.res_code <= -900) {
              localStorage.removeItem('token');
              window.location.href = '/tlmall/login?' + window.location.href;
            }
          }).catch(err => {
            setLog('/api/v2/receiving_info/getReceivingInfoList:catch', JSON.stringify(err));
          })
        <%}%>
      },
      methods: {
        getAddressList() {
          // 获取收货地址列表
          var vm = this;
          api.post('/api/v2/receiving_info/getReceivingInfoList', {
            token: localStorage.getItem('token')
          }).then(res => {
            if (res.data.res_code == 1) {
              vm.addressList = res.data.data;
            } else if (res.data.res_code <= -900) {
              localStorage.removeItem('token');
              window.location.href = '/tlmall/login?' + window.location.href;
            }
          }).catch(err => {
            setLog('/api/v2/receiving_info/getReceivingInfoList:catch', JSON.stringify(err));
          })
        },
        handleDefault() {
          // 设置默认地址
          this.addAddress.is_default = !this.addAddress.is_default;
        },
        handleKeepAddress() {
          String.prototype.trim = function() {
            return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
          }
          // 添加收货地址
          if (this.is_add) {
            return;
          }
          if (this.addAddress.name.trim() == '') {
            alert('姓名不能为空')
            return;
          }
          if (this.addAddress.phone.trim() == '') {
            alert('手机号不能为空')
            return;
          }
          if (this.addAddress.name.trim().length > 6) {
            alert('最多输入6个汉字或英文字母！')
            return;
          }
          if (this.addAddress.code_address.trim() == '' && this.addAddress.user_address.trim() == "") {
            alert('收货地址不能为空');
            return;
          }
          this.is_add = true;
          if (this.address_origin == 'add') {
            api.post('/api/v2/receiving_info/addReceivingInfo', this.addAddress).then(res => {
              if (res.data.res_code == 1) {
                alert('保存成功');
                <%if (address_origin == 'add') {%>
                  window.history.back()
                <%}%>
                this.is_add = false;
              }
            }).catch(err => {
              this.is_add = false;
              setLog('/api/v2/receiving_info/addReceivingInfo:catch', JSON.stringify(err));
            })
          } else if (this.address_origin == 'edit') {
            api.post('/api/v2/receiving_info/updateReceivingInfo', this.addAddress).then(res => {
              if (res.data.res_code == 1) {
                alert('编辑成功')
                <%if (address_origin == 'edit') {%>
                  window.location.replace('/tlmall/address?address_origin=order');
                <%}%> 
                this.is_add = false;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
              }
            }).catch(err => {
              this.is_add = false;
              setLog('/api/v2/receiving_info/updateReceivingInfo:catch', JSON.stringify(err));
            })
          }
        },
        handleChooseArea() {
          // 显示选择地区, 选择省级
          if (this.choose_Area) {
            return;
          }
          this.areaMode = true;
          var vm = this;
          this.choose_Area = true;
          api.post('/api/base_info/getXZProvinceList').then(res => {
            vm.XZPList = res.data.msg;
            this.choose_Area = false;
          }).catch(err => {
            this.choose_Area = false;
            setLog('/api/base_info/getXZProvinceList:catch', JSON.stringify(err));
          })
        },
        handleModeFalse() {
          // 取消选择地区弹框
          this.areaMode = false;
          this.addAddress.code_address = '';
          this.addAddress.province_code = '';
          this.addAddress.city_code = '';
          this.addAddress.user_address = '';
        },
        handleChooseXZCity(province_code, province_name) {
          var vm = this;
          this.is_province = false;
          this.is_city = true;
          this.addAddress.province_code = province_code;
          this.addAddress.code_address = province_name;
          api.post('/api/base_info/getXZCityList', {
            province_code
          }).then(res => {
            vm.XZPList = res.data.msg;
          }).catch(err => {
            setLog('/api/base_info/getXZCityList:catch', JSON.stringify(err));
          })
        },
        handleChooseXZArea(city_code, province_code, city_name) {
          this.addAddress.city_code = city_code;
          // 省市列表隐藏显示区
          this.is_city = false;
          this.is_province = false
          this.is_area = true;
          this.addAddress.code_address += city_name;
          var vm = this;
          api.post('/api/base_info/getXZAreaList', {
            province_code,
            city_code
          }).then(res => {
            vm.XZPList = res.data.msg;
          }).catch(err => {
            setLog('/api/base_info/getXZAreaList:catch', JSON.stringify(err));
          })
        },
        handleGetAreaName(area_name) {
          this.addAddress.code_address += area_name;
          this.areaMode = false;
          this.handleChooseArea = "";
        },
        handleAddAddress() {
          // 新建收货地址
          location.href = '/tlmall/address?address_origin=add'
        },
        handleEditAddress(receiving_info_id) {
          // 编辑地址        
          location.href = '/tlmall/address?address_origin=edit&receiving_info_id=' + receiving_info_id;
        },
        handleDelectAddress (receiving_info_id) {
          // 删除地址
          if (window.confirm('确定要删除吗？')) {
            api.post('/api/v2/receiving_info/deleteReceivingInfo',{
              token: localStorage.getItem('token'),
              receiving_info_id
            }).then(res => {
              if (res.data.res_code == 1) {
                alert('删除成功')
                window.location.reload();
              } else {
                alert('删除失败！请重新尝试！')
              }
            }).catch(err => {
              setLog('/api/v2/receiving_info/deleteReceivingInfo', JSON.stringify(err));
            })
          }
        },
        handleChooseAddress (item) {
          // 支付页面过来选中地址
          var address_name = item.name;
          var address_phone = item.phone;
          var address = item.code_address+item.user_address;
          location.href = encodeURI(encodeURI('/tlmall/signup'+location.search+'&address='+address+'&address_name='+address_name+'&address_phone='+address_phone));
        }
      }
    })


  </script>
</body>

</html>